<template>
	<view class="page-content">
		<view class="m-md section-bg radius-10" v-if="goodsInfo">
			<view class="title-part flex-between flex-align-items p-sm p-l-md p-r-md">
				<m-icon name="shopping-cart-line" :text="$t('mall.goods-title')"></m-icon>
			</view>
			<view class="p-md">
				<m-goods-list-ass :item="goodsInfo" :num="1"></m-goods-list-ass>
			</view>
		</view>
		<view class="m-md section-bg radius-10">
			<view class="title-part flex-between flex-align-items p-sm p-l-md p-r-md">
				<m-icon name="file-list-2-line" :text="$t('mall.user-title')"></m-icon>
			</view>
			<view class="rel m-md">
				<u--form
					labelPosition="left"
					:model="subData"
					:rules="subRules"
					labelWidth="100rpx"
					ref="uForm"
					:labelStyle="{'font-size':'28rpx','color':'#555'}"
				>
					<u-form-item
						:label="$t('mall.order-form-item-1')"
						prop="fullname"
						labelPosition="left"
						borderBottom
					>
						<u--input
							v-model="subData.fullname"
							border="none"
							style="margin-left:20rpx;"
						></u--input>
					</u-form-item>
					<u-form-item
						:label="$t('mall.order-form-item-2')"
						prop="mobile"
						labelPosition="top"
						borderBottom
					>
						<u--input
							v-model="subData.mobile"
							border="none"
							:style="{'margin-left':'20rpx',}"
						></u--input>
					</u-form-item>
					<u-form-item
						:label="$t('mall.order-form-item-3')"
						prop="add"
						borderBottom
					>
						<u--input
							v-model="subData.add"
							border="none"
							:style="{'margin-left':'20rpx'}"
						></u--input>
					</u-form-item>
					<u-form-item
						:label="$t('mall.order-form-item-4')"
						prop="subData.remarks"
						labelPosition="top"
					>
						<u--textarea
							confirmType="done"
							v-model="subData.remarks"
							border="none"
							:placeholder="$t('mall.order-form-item-4-placeholder')"
						></u--textarea>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="m-md">
			<u-button
				:text="$t('goods_order.submit-btn')"
				shape="circle"
				:color="configInfo.mainColor" 
				style="color:#555"
				:loading="actionLoading" 
				:disabled="actionLoading" 
				loadingText=" "
				@click="submit"
			>
			</u-button>
			
		</view>
		
		<m-modal
			:show="moneyShow"
			:title="$t('goods_order.fail-modal-title')" 
			@close="moneyShow = false"
		>
		<view class="p-t-md p-b-md text-sm">
			{{$util.handleStr($t('goods_order.money-not-tips'),configInfo.integral_company,configInfo.integral_company) }}
		</view>
		</m-modal>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				goodsId:'', // 商品id
				goodsInfo:'', // 商品信息
				subData:{
					fullname: '', 	// 真实姓名
					mobile:'', 		// 手机号码
					add:'', 		// 地址
					remarks:'', 	// 备注
				},
				subRules: {
					'fullname': {
						type: 'string',
						required: true,
						message: this.$t('mall.order-form-item-1-message'),
						trigger: ['blur', 'change']
					},
					'mobile': [{
						required: true, 
						message: this.$t('mall.order-form-item-2-message'),
						trigger: ['change','blur'],
					},{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// this.$util.showToast(value)
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: this.$t('mall.order-form-item-3-message'),
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
					'add':{
						type: 'string',
						required: true,
						message: this.$t('mall.order-form-item-4-message'),
						trigger: ['blur', 'change']
					}
				},
				actionLoading:false,
				scrollTop:0,
				moneyShow:false
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			steps: state => state.mall.OrderSteps,
			goodsCache: state => state.mall.goodsDetailKey, // 商品缓存key
		}),
		onLoad(option){
			let {
				goods_id
			} = option
			this.goodsId = goods_id
			// this.init()
			let cacheData = uni.getStorageSync( this.goodsCache+this.goodsId)
			if(cacheData){
				this.goodsInfo = cacheData
			}
		},
		onShow(){
			this.getGoodsInfo()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {

			// init(){
			// 	if(this.userInfo){
			// 		this.subData.fullname = this.userInfo.real_name
			// 	}
			// 	this.getGoodsInfo()
			// },
			
			// 获取商品信息
			async getGoodsInfo(){
				let {
					goodsId
				} = this
				if(!goodsId){
					this.$util.showToast(this.$t('app.error-1'),function(){
						// 返回上一页
					})
				}
				// 开始获取商品数据
				let res = await this.$api.mall.getMallInfo(goodsId)
				if(res.code == 200){
					this.goodsInfo = res.data
					// this.$util.addCache(this.goodsCacheKey,res.data)
				}
			},
			
			async submit(paramData){
				// let {
				// 	actionLoading
				// } = this
				// this.$refs.uForm.validate().then(res => {
				// 	this.actionLoading = true
					
				// }).catch(errors => {
				// 	this.$util.showToast('收货人信息不正确')
				// })
				
				this.actionLoading = true
				let {
					subData:params,
					goodsId
				} = this
				params['id'] = goodsId
				let res = await this.$api.mall.submitMallOrder(params)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.$util.redirectGo('pages/order_list','/mall/')
					})
				}
				// if(res.code == 20003){
				// 	this.moneyShow = true
				// }
				this.actionLoading = false
				// let thos = this
				// thos.actionLoading = true
				// let res = await thos.$api.mall.submitMallOrder(paramData)
				// console.log(paramData)
				// if(res.code == 200){
				// 	thos.$util.showToast(res.msg,function(){
				// 		thos.$util.redirectGo('pages/order_list','/mall/')
				// 	})
				// }
				// if(res.code == 403){
				// 	thos.popupContent = thos.$util.handleStr(thos.$t('goods_order.money-not-tips'),thos.configInfo.integral_company,thos.configInfo.integral_company);
				// 	thos.noMoneyShow = true
				// }
				// thos.actionLoading = false
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
</style>
